<template>
    <div class="team_form_wrapper">
        <div class="team_form">
            <h4 class="title">基础设置</h4>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name" style="width: 60%" maxlength="45" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="start_time">
                    <el-date-picker v-model="ruleForm.start_time" :picker-options="pickerOptions" type="datetime" placeholder="开始时间" :disabled="pageIsEdit"></el-date-picker>&nbsp;至&nbsp;
                    <el-date-picker v-model="ruleForm.end_time" :picker-options="pickerOptions" type="datetime" placeholder="结束时间"></el-date-picker>                   
                </el-form-item>
                <el-form-item label="参团人数" prop="number" v-if="$route.query.teamType == 0 || $route.query.teamType == 1">
                    <el-input style="width: 20%" v-model="ruleForm.number" placeholder="2-100" @input="ruleForm.number=ruleForm.number.replace(/[^\d]/g,'')" :disabled="pageIsEdit"></el-input>&nbsp;人
                </el-form-item>
                <el-form-item v-if="$route.query.teamType == 2">
                    <label style="float: left;margin: 0 0 0 -75px;color: #606266;"><span style="color: #F56C6C;margin: 0 3px 0 0;">*</span>参团人数</label>
                    <div style="margin: 0 0 5px 0;">
                        第一阶梯&nbsp;<el-input style="width: 200px" v-model="ruleForm.number1" placeholder="2-100" :disabled="pageIsEdit" @input="ruleForm.number1=ruleForm.number1.replace(/[^\d]/g,'')" @blur="blurChange(1)"></el-input>&nbsp;人
                        <p style="color: #F56C6C;font-size: 12px;margin: 0 0 0 60px;" v-if="stepVisible1">请输入2-100内的整数</p>
                    </div>
                    <el-form-item prop="number2">
                        <div style="margin: 0 0 5px 0;">
                            第二阶梯&nbsp;<el-input style="width: 200px" v-model="ruleForm.number2" placeholder="2-100" :disabled="pageIsEdit" @input="ruleForm.number2=ruleForm.number2.replace(/[^\d]/g,'')" @blur="blurChange(2)"></el-input>&nbsp;人
                            <p style="color: #F56C6C;font-size: 12px;margin: 0 0 0 60px;" v-if="stepVisible2">人数需大于上一阶梯</p>
                        </div>
                    </el-form-item>
                    <el-form-item prop="number3" v-if="addStepVisible || ruleForm.number3">
                        <div style="margin: 0 0 5px 0;">
                            第三阶梯&nbsp;<el-input style="width: 200px" v-model="ruleForm.number3" placeholder="2-100" :disabled="pageIsEdit" @input="ruleForm.number3=ruleForm.number3.replace(/[^\d]/g,'')" @blur="blurChange(3)"></el-input>&nbsp;人&nbsp;&nbsp;&nbsp;<el-link type="primary" :underline="false" @click="deleteStep" :disabled="pageIsEdit">删除</el-link><br />
                            <p style="color: #F56C6C;font-size: 12px;margin: 0 0 0 60px;" v-if="stepVisible3">人数需大于上一阶梯</p>
                            <p style="color: #888;">最多可设置3级阶梯</p>
                        </div>
                    </el-form-item>
                    <el-button @click="addStep" v-else>添加阶梯</el-button>
                </el-form-item>
                <el-form-item label="拼团商品" prop="goods_id">
                    <el-input type="hidden" style="display: none;" v-model="ruleForm.goods_id" placeholder="请选择拼团商品"></el-input>
                    <el-button v-if="productSelectData.length == 0" @click="chooseProduct">选择商品</el-button>
                    <el-table
                    :data="productSelectData"
                    style="width: 100%"
                    v-else>
                        <el-table-column
                            prop="title"
                            label="商品名称"
                            width="240">
                            <template slot-scope="{row}">
                                <div class="product_image">
                                    <img :src="row.cover" alt="" />
                                    <span>{{ row.title }}</span>
                                 </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="类型"
                            width="180">
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" :disabled="pageIsEdit" @click="delectProduct">删除</el-button>                            
                            </template>
                        </el-table-column>
                    </el-table>    
                </el-form-item>
                <el-form-item label="拼团价设置" prop="group_price" v-if="productSelectData.length > 0 && ($route.query.teamType == 0 || $route.query.teamType == 1)">                    
                    <el-table
                    :data="productSelectData"
                    style="width: 65%">
                        <el-table-column                            
                            label="商品规格"
                            width="100">   
                            {{ '--' }}                         
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="原价（元）"
                            width="150">                            
                        </el-table-column>
                        <el-table-column
                            v-if="$route.query.teamType == 0 || $route.query.teamType == 1"
                            prop="group_price"
                            label="拼团价（元）"
                            width="150">    
                            <template slot-scope="{row}">
                                <el-input-number style="width: 120px;" v-model="ruleForm.group_price" controls-position="right" :max="row.price*1" :disabled="pageIsEdit" @change="changeGroupPrice"></el-input-number><br />
                                <p style="color: #F56C6C;" v-if="simuVisible4">拼团价须低于原价</p>
                            </template>                        
                        </el-table-column>                   
                        <el-table-column
                            label="库存"
                            width="100">                             
                            {{ 100000 }}                                                  
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="拼团价设置" prop="group_price1" v-if="productSelectData.length > 0 && $route.query.teamType == 2">                    
                    <el-table
                    :data="productSelectData"
                    style="width: 65%">
                        <el-table-column                            
                            label="商品规格"
                            width="100">   
                            {{ '--' }}                         
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="原价（元）"
                            width="150">                            
                        </el-table-column>                        
                        <el-table-column                            
                            prop="group_price1"
                            :label="`${ruleForm.number1}人拼团价（元）`"
                            width="150">    
                            <template slot-scope="{row}">
                                <el-input-number style="width: 120px;" v-model="ruleForm.group_price1" controls-position="right" :max="row.price*1" :disabled="pageIsEdit" @change="changeGroupPrice"></el-input-number><br />
                                <p style="color: #F56C6C;" v-if="simuVisible4">拼团价须低于原价</p>
                            </template>                        
                        </el-table-column>
                        <el-table-column                           
                            prop="group_price2"
                            :label="`${ruleForm.number2}人拼团价（元）`"
                            width="200">    
                            <template slot-scope="{row}">
                                <el-input-number style="width: 120px;" v-model="ruleForm.group_price2" controls-position="right" :max="row.price*1" :disabled="pageIsEdit" @change="changeGroupPrice2"></el-input-number><br />
                                <p style="color: #F56C6C;" v-if="simuVisible5">拼团价须低于原价</p>
                                <p style="color: #F56C6C;" v-if="simuVisible6">拼团价须低于上一阶梯价格</p>
                            </template>                        
                        </el-table-column>
                        <el-table-column
                            v-if="addStepVisible"
                            prop="group_price3"
                            :label="`${ruleForm.number3}人拼团价（元）`"
                            width="200">    
                            <template slot-scope="{row}">
                                <el-input-number style="width: 120px;" v-model="ruleForm.group_price3" controls-position="right" :max="row.price*1" :disabled="pageIsEdit" @change="changeGroupPrice3"></el-input-number><br />
                                <p style="color: #F56C6C;" v-if="simuVisible7">拼团价须低于原价</p>
                                <p style="color: #F56C6C;" v-if="simuVisible8">拼团价须低于上一阶梯价格</p>
                            </template>                        
                        </el-table-column>
                        <el-table-column
                            label="库存"
                            width="100">                             
                            {{ 100000 }}                                                  
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="成团时限" prop="time_limit_days">
                    <el-select v-model="ruleForm.time_limit_days" placeholder="请选择" style="width: 100px">
                        <el-option
                            v-for="item in limitDayOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>&nbsp;日&nbsp;
                    <el-select v-model="ruleForm.time_limit_hours" placeholder="请选择" style="width: 100px">
                        <el-option
                            v-for="item in limitHourOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>&nbsp;时
                    <br />
                    <p style="color: #888;">若设置1日，用户开团后，需要在1日内成团，超时则拼团失败</p>
                </el-form-item>
                <el-form-item label="叠加超级会员折扣">
                    <el-radio-group v-model="ruleForm.is_VIP_price">
                        <el-radio label="1" :disabled="pageIsEdit">开启</el-radio>
                        <el-radio label="0" :disabled="pageIsEdit">关闭</el-radio>
                    </el-radio-group>
                    <p style="color: #888;">开启后，将会在拼团价的基础上叠加超级会员折扣</p>
                </el-form-item>
                <h4 class="title">更多设置<el-link class="toggle" type="primary" :underline="false" @click="handerToggle">{{ sliderTitle }}</el-link></h4>
                <div class="config_more" v-if="sliderVisible">
                    <el-form-item label="购买弹幕">
                        <el-radio-group v-model="ruleForm.is_barrage">
                            <el-radio label="1">开启</el-radio>
                            <el-radio label="0">开启</el-radio>
                        </el-radio-group>
                        <p style="color: #888;">开启后，拼团活动页面左上角会以滚动弹幕的形式，显示已购用户名单<el-link type="primary" :underline="false">查看示例</el-link></p>
                    </el-form-item>
                    <el-form-item label="在线凑团">
                        <el-radio-group v-model="ruleForm.is_online">
                            <el-radio label="1">开启</el-radio>
                            <el-radio label="0">开启</el-radio>
                        </el-radio-group>
                        <p style="color: #888;">开启后，课程详情会显示未成团的团，用户可任意选一个参团，提升成团率</p>
                    </el-form-item>
                    <el-form-item label="模拟参团">
                        <el-radio-group v-model="ruleForm.is_simulate">
                            <el-radio label="1">开启</el-radio>
                            <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                        <p style="color: #888;">开启后，当在拼团有效期内或拼团活动结束前，人数未满的团，系统将会模拟“匿名”买家凑满人数，使其成团</p>
                        <div class="add" v-if="ruleForm.is_simulate > 0 && ($route.query.teamType == 0 || $route.query.teamType == 1)">
                            <span>参团人数≥</span>&nbsp;
                            <el-input-number v-model="ruleForm.simulate_number" controls-position="right" @change="handleChange" :min="0" :max="ruleForm.number*1" style="width: 120px;"></el-input-number>&nbsp;人
                            <p style="color: #F56C6C;margin: 0 0 0 70px;" v-if="simuVisible">模拟参团人数需小于参团人数</p>
                        </div>
                        <div class="add" v-if="ruleForm.is_simulate > 0 && ($route.query.teamType == 2)">
                            <div style="margin: 0 0 20px 0;">
                                <span>第一阶梯</span>&nbsp;
                                <span>参团人数≥</span>&nbsp;
                                <el-input-number v-model="ruleForm.simulate_number1" controls-position="right" @change="handleChange1" :min="0" :max="ruleForm.number1*1" style="width: 120px;"></el-input-number>&nbsp;人
                                <p style="color: #F56C6C;margin: 0 0 0 70px;" v-if="simuVisible1">模拟参团人数需小于第一阶梯参团人数</p>
                            </div>
                            <div style="margin: 0 0 20px 0;">
                                <span>第二阶梯</span>&nbsp;
                                <span>参团人数≥</span>&nbsp;
                                <el-input-number v-model="ruleForm.simulate_number2" controls-position="right" @change="handleChange2" :min="0" :max="ruleForm.number2*1" style="width: 120px;"></el-input-number>&nbsp;人
                                <p style="color: #F56C6C;margin: 0 0 0 70px;" v-if="simuVisible2">模拟参团人数需小于第二阶梯参团人数</p>
                            </div>                            
                            <div v-if="addStepVisible || ruleForm.number3">
                                <span>第三阶梯</span>&nbsp;
                                <span>参团人数≥</span>&nbsp;
                                <el-input-number v-model="ruleForm.simulate_number3" controls-position="right" @change="handleChange3" :min="0" :max="ruleForm.number3*1" style="width: 120px;"></el-input-number>&nbsp;人
                                <p style="color: #F56C6C;margin: 0 0 0 70px;" v-if="simuVisible3">模拟参团人数需小于第三阶梯参团人数</p>
                            </div>                            
                        </div>
                        <div class="base">
                            <span>基于以下情况，请谨慎设置：</span>
                            <p>1.用户使用支付宝付款时，无论拼团是否成功，支付宝平台均将收取0.6%手续费；</p>
                            <p>2.为避免您的资金损失，建议模拟成团人数设置为1，输入>1时，此拼团活动将自动关闭支付宝支付。</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="超级成团">
                        <el-radio-group v-model="ruleForm.is_overmanned">
                            <el-radio label="1">开启</el-radio>
                            <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                        <p style="color: #888;">开启后，拼团人数为最低成团人数。即：如果同时参与某个团的人数超过拼团人数，那么将以实际参团的人数成团，避免超员用户支付成功却被迫退款的情况</p>
                    </el-form-item>
                    <el-form-item label="活动预热">
                        <el-radio-group v-model="ruleForm.is_warm_up">
                            <el-radio label="1">开启</el-radio>
                            <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                        <p style="color: #888;">开启后，会即时在商品详情页展示尚未开始的拼团活动预告；活动开始后，用户才能使用拼团价<el-link type="primary" :underline="false">查看示例</el-link></p>
                    </el-form-item>
                    <el-form-item label="分享设置">
                        <el-radio-group v-model="ruleForm.share_setting">
                            <div class="default_radio">
                                <el-radio label="0">默认</el-radio>
                                <el-link type="primary" :underline="false">查看示例</el-link>
                            </div>
                            <el-radio label="1">自定义</el-radio>
                        </el-radio-group>
                        <p style="color: #888;">本设置仅适用于参团页的分享，课程详情页的分享可前往【课程管理】进行自定义设置
                        </p>
                        <div class="custom_wrapper" v-if="ruleForm.share_setting > 0">
                            <el-form-item label="分享标题" prop="share_title">
                                <el-input type="textarea" v-model="ruleForm.share_title" aria-placeholder="请输入分享标题，建议字数在24个字以内"></el-input>
                                <p>插入变量：<el-link type="primary" :underline="false" @click="addLink('【成团所需人数】')">【成团所需人数】</el-link><el-link type="primary" :underline="false" @click="addLink('【拼团价】')">【拼团价】</el-link></p>
                            </el-form-item>
                            <el-form-item label="分享描述" prop="share_desc">
                                <el-input type="textarea" v-model="ruleForm.share_desc" aria-placeholder="请输入分享描述，建议字数在36个字以内"></el-input>
                            </el-form-item>
                            <el-form-item label="分享图片" prop="share_pic">  
                                <div v-if="ruleForm.share_pic" class="share_picture">
                                    <div class="mask"></div>
                                    <img :src="ruleForm.share_pic" alt="" />
                                    <i class="el-icon-delete" @click="deletePicture"></i>
                                </div>
                                <div class="add_picture" v-else>
                                    <el-button onclick="document.getElementById('upload1').click()"><i class="el-icon-plus"></i></el-button>
                                    <input type="file" name="upload1" id="upload1" style="display: none;" @change="uploadFile($event)" /> 
                                    <div class="el-upload__tip">图片格式为：bmp，png，jpeg，jpg，gif，尺寸1:1，不可大于1M。</div>                                                          
                                </div>
                            </el-form-item>
                        </div>                            
                    </el-form-item>
                </div>
                <el-form-item>
                    <div class="footer_btn_group">
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog width="600px" title="选择产品类型" :visible.sync="productTypeVisible">
            <dl class="product_type">
                <dd v-for="item in productTypeList" :key="item.id" :class="{'curProduct': item.isCheck }" @click="chooseType(item)">
                    {{ item.label }}
                </dd>
            </dl>
            <el-table
                :data="productData"
                @row-click="chooseRow"
                class="chooseCourseTable"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column :label="`${productTypeTitle}封面`">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="" class="info_image" />
                    </template>
                </el-table-column>
                <el-table-column prop="title" :label="`${productTypeTitle}名称`"></el-table-column>
                <el-table-column label="免费/付费">
                    <template slot-scope="scope">
                        <span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" :label="`${productTypeTitle}类型`" v-if="productTypeTitle == '课程'">
                    <template slot-scope="scope">
                        {{ scope.row.type == 'video' ? '视频' : scope.row.type == 'audio' ? '音频' : '图文' }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.status == 0 ? '未上架' : '已上架' }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="productTotal"
                    @current-change="coursePageChange"
                ></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import { debounce } from 'lodash';
import uploadfileMixin from '@/mixin/uploadossfile.js';
import deletefileMixin from '@/mixin/deleteossfile.js';
import { videoListData,columnListData,houtaiimagebucket,api_CreateTeamWork,api_teamWorkTableCellEdit } from '../../api/index';
export default{
    mixins: [uploadfileMixin,deletefileMixin],
    data(){
        return {
            addStepVisible: false,
            ruleForm: {
                name: '',
                start_time: '',
                end_time: '',
                goods_id: '',
                goods_type: '',
                group_price: '',
                group_price1: '',
                group_price2: '',
                group_price3: '',
                time_limit_days: 1,
                time_limit_hours: 0,
                number: '',
                number1: '',
                number2: '',
                number3: '',
                is_VIP_price: '0',
                is_barrage: '1',
                is_online: '1',
                is_simulate: '1',
                is_overmanned: '1',
                is_warm_up: '1',
                simulate_number: '',
                simulate_number1: '',
                simulate_number2: '',
                simulate_number3: '',
                share_setting: '0',
                share_title: '',
                share_desc: '',
                share_pic: '',              
            },
            rules: {                
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                start_time: [
                    { required: true, message: '请选择活动时间', trigger: 'change' }
                ],
                goods_id: [
                    { required: true, message: '请选择拼团商品',trigger: 'blur' },
                ],
                time_limit_days: [
                    { required: true, message: '请选择成团时限', trigger: 'change' },
                ],
                number: [
                    { required: true, message: '请输入2-100', trigger: 'blur' },
                ],
                group_price: [
                    { required: true, message: '请输入拼团价格',trigger: 'blur' },
                ],
                group_price1: [
                    { required: true, message: '请输入拼团价格',trigger: 'blur' },
                ],
                share_title: [
                    { required: true, message: '请输入分享标题', trigger: 'blur' },
                ],
                share_desc: [
                    { required: true, message: '请输入分享描述', trigger: 'blur' },
                ],
                share_pic: [
                    { required: true, message: '请选择分享图片', trigger: 'change' },
                ]
            },
            limitDayOptions: [
                { value: 0, label: '00' },
                { value: 1, label: '01' },
                { value: 2, label: '02' },
                { value: 3, label: '03' },
                { value: 4, label: '04' },
                { value: 5, label: '05' },
                { value: 6, label: '06' },
                { value: 7, label: '07' },
                { value: 8, label: '08' },
                { value: 9, label: '09' },
                { value: 10, label: '10' },
                { value: 11, label: '11' },
                { value: 12, label: '12' },
                { value: 13, label: '13' },
                { value: 14, label: '14' },
                { value: 15, label: '15' },
            ],
            limitHourOptions: [
                { value: 0, label: '00' },
                { value: 1, label: '01' },
                { value: 2, label: '02' },
                { value: 3, label: '03' },
                { value: 4, label: '04' },
                { value: 5, label: '05' },
                { value: 6, label: '06' },
                { value: 7, label: '07' },
                { value: 8, label: '08' },
                { value: 9, label: '09' },
                { value: 10, label: '10' },
                { value: 11, label: '11' },
                { value: 12, label: '12' },
                { value: 13, label: '13' },
                { value: 14, label: '14' },
                { value: 15, label: '15' },
                { value: 16, label: '16' },
                { value: 17, label: '17' },
                { value: 18, label: '18' },
                { value: 19, label: '19' },
                { value: 20, label: '20' },
                { value: 21, label: '21' },
                { value: 22, label: '22' },
                { value: 23, label: '23' },
            ],
            statusOptions: [
                { value: 0, label: '未开始' },
                { value: 1, label: '进行中' },
                { value: 2, label: '已结束' },
                { value: 3, label: '已失效' },
            ],
            sliderVisible: true,
            sliderTitle: '收起',
            productTypeTitle: '',
            productType: '',
            productTypeList: [
                {
                    value: 'image_text',
                    label: '图文',
                    isCheck: false,
                },
                {
                    value: 'audio',
                    label: '音频',
                    isCheck: false,
                },
                {
                    value: 'video',
                    label: '视频',
                    isCheck: false,
                },
                {
                    value: 'column',
                    label: '专栏',
                    isCheck: false,
                }
            ],
            productSelectData: [],
            productData: [],
            productTypeVisible: false,
            productTotal: null,
            query: {
                page: 1,
                rows: 4,
                type: ''
            },
            stepVisible1: false,
            stepVisible2: false,
            stepVisible3: false,
            simuVisible: false,
            simuVisible1: false,
            simuVisible2: false,
            simuVisible3: false,
            simuVisible4: false,    
            simuVisible5: false,        
            simuVisible6: false,        
            simuVisible7: false,        
            simuVisible8: false,        
            loadProgress: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            pageIsEdit: false,
        }
    },
    computed: {

    },
    created(){
        this.initEditList();    
    },
    mounted(){
    },
    methods: {
        initEditList(){
            let { id,teamType } = this.$route.query;
            this.pageIsEdit = false;
            if (id) {
                api_teamWorkTableCellEdit({id: id}).then(res => {
                    if (res.code == 1) {
                        this.ruleForm = {
                            ...this.ruleForm,
                            ...res.data,
                            is_VIP_price: res.data.is_VIP_price.toString(),
                            is_barrage: res.data.is_barrage.toString(),
                            is_online: res.data.is_online.toString(),
                            is_simulate: res.data.is_simulate.toString(),
                            is_overmanned: res.data.is_overmanned.toString(),
                            is_warm_up: res.data.is_warm_up.toString(),
                            share_setting: res.data.share_setting.toString(),
                        };
                        this.pageIsEdit = this.ruleForm.status >= 1 ? true : false;
                        this.addStepVisible = this.ruleForm.number3 ? true: false;
                        this.productSelectData.push(res.data.goods_info);
                    } else {
                        this.$message.error(res.msg);
                    }
                    console.log(res);
                })
            }            
        },
        blurChange(n){ // 阶梯拼团参团人数输入框blur
            n == 1 && (this.stepVisible1 = this.ruleForm.number1 ? false : true);
            if (n == 2) {
                if (this.ruleForm.number2 * 1 > this.ruleForm.number1 * 1) {
                    this.stepVisible2 = false;
                } else {
                    this.stepVisible2 = true;
                }
            }
            if (n == 3) {
                if (this.ruleForm.number3 * 1 > this.ruleForm.number2 * 1) {
                    this.stepVisible3 = false;
                } else {
                    this.stepVisible3 = true;
                }
            }        
        },
        addStep(){  // 添加阶梯
            console.log('添加阶梯');
            this.addStepVisible = true;
        },
        deleteStep(){   // 删除阶梯
            console.log('删除阶梯');
            this.addStepVisible = false;
            this.ruleForm.number3 = '';
        },
        handleChange(val){ // 模拟参团人数设置【普通、邀新】
            console.log('参团人数：',val);
            this.simuVisible = val >= this.ruleForm.number ? true: false;
        },
        handleChange1(val){ // 模拟参团人数设置【阶梯1】
            console.log('参团人数：',val);
            this.simuVisible1 = val >= this.ruleForm.number1 ? true: false;
        },
        handleChange2(val){ // 模拟参团人数设置【阶梯2】
            console.log('参团人数：',val);
            this.simuVisible2 = val >= this.ruleForm.number2 ? true: false;
        },
        handleChange3(val){ // 模拟参团人数设置【阶梯3】
            console.log('参团人数：',val);
            this.simuVisible3 = val >= this.ruleForm.number3 ? true: false;
        },
        chooseProduct(){    // 选择商品
            this.productTypeVisible = true;
        },
        chooseType(v){   // 选择产品类型
            this.productTypeList.forEach(v => v.isCheck = false);
            this.productSelectData = [];
            v.isCheck = true;
            this.query.type = v.value;
            this.productTypeTitle = v.label;
            this.productType = v.value;
            if (v.value != 'column') {
                videoListData(this.query).then((res) => {
                    if (res.code == 1) {
                        this.productData = res.data.list;
                        this.productTotal = res.data.count;                    
                    } else {
                        this.$message.warning(res.msg);
                    }
                });
            } else {
                columnListData(this.query).then((res) => {
                    if (res.code == 1) {
                        this.productData = res.data.list;
                        this.productTotal = res.data.count;                        
                    } else {
                        this.$message.warning(res.msg);
                    }                                    
                });
            }
        },
        chooseRow: debounce(function(row) {    // 商品列表数据表格行 
            console.log(row);
            this.productSelectData.push(row);
            this.ruleForm.goods_id = row.id;
            this.ruleForm.goods_type = row.type;
            this.productTypeVisible = false;
            console.log(this.ruleForm)
        },600),
        coursePageChange(val) { // 课程分页
            this.query.page = val;            
            if (this.productType != 'column') {
                videoListData(this.query).then((res) => {
                    if (res.code == 1) {
                        this.productData = res.data.list;
                        this.productTotal = res.data.count;                    
                    } else {
                        this.$message.warning(res.msg);
                    }
                });
            } else {
                columnListData(this.query).then((res) => {
                    if (res.code == 1) {
                        this.productData = res.data.list;
                        this.productTotal = res.data.count;                        
                    } else {
                        this.$message.warning(res.msg);
                    }                                    
                });
            }
        },
        delectProduct(){    // 删除选中商品
            this.productSelectData.splice(0,1);
            this.ruleForm.goods_id = '';
            this.ruleForm.goods_type = '';
        },
        changeGroupPrice(val){ // 设置拼团价
            this.simuVisible4 = val >= this.productSelectData[0].price ? true: false;
            console.log(val);
        },
        changeGroupPrice2(val){ // 设置第二阶梯拼团价
            this.simuVisible5 = val >= this.productSelectData[0].price ? true: false;
            this.simuVisible6 = val >= this.ruleForm.group_price1 ? true: false;
            console.log(val);
        },
        changeGroupPrice3(val){ // 设置第三阶梯拼团价
            this.simuVisible7 = val >= this.productSelectData[0].price ? true: false;
            this.simuVisible8 = val >= this.ruleForm.group_price2 ? true: false;
            console.log(val);
        },
        handerToggle(){ // 更多设置展开/收起
            this.sliderVisible = !this.sliderVisible;
            this.sliderTitle = this.sliderVisible ? '收起' : '展开';
        },
        addLink(val){  // 插入变量
            if (this.ruleForm.share_title.indexOf(val) == -1) {
                let arr = this.ruleForm.share_title.split('');
                arr.push(val);
                this.ruleForm.share_title = arr.join('');
            }
        },
        async uploadFile(e) { // 选择上传文件
            let username = localStorage.getItem('ms_username');
            let shopuuid = localStorage.getItem('shopuuid');
            let files = e.target.files;
            let suffix = files[0].name.split('.')[1];
            let accept = ['bmp','jpeg','jpg', 'jpeg', 'png', 'gif'];
            if (accept.includes(suffix)) {
                if (files[0].size / 1024 / 1024 > 2) {
                    return this.$message.warning("图片大小大于1MB，请重新选择图片上传！");
                }
                const fileBase64 = await getBase64(files[0]);
				const result = await getImgPx(fileBase64);
                let path = 'image/' + username + '/' + shopuuid + '/' + files[0].name;
                let url = await this.fileUpload(files[0], path, 0, this,houtaiimagebucket,1); //上传到oss
                this.ruleForm.share_pic = url;
                console.log(this.ruleForm);
            } else {
                return this.$message.error("只能上传图片！");
			}
        },
        deletePicture(){    // 删除上传图片
            this.ruleForm.share_pic = '';
        },  
        resetForm(formName) {   // 取消创建拼团
            this.$refs[formName].resetFields();
        },
        submitForm(formName){   // 保存创建拼团
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm = { ...this.ruleForm,start_time: moment(this.ruleForm.start_time).format('YYYY-MM-DD HH:mm:ss'),end_time: moment(this.ruleForm.end_time).format('YYYY-MM-DD HH:mm:ss'),type: this.$route.query.teamType };
                    this.validTest();
                    if (this.validTest()){
                        api_CreateTeamWork(this.ruleForm).then(res => {
                            if (res.code == 1) {
                                this.$message.success(res.msg);
                                this.$router.push({
                                    path: '/teamwork'
                                });
                            } else {
                                this.$message.error(res.msg);
                            }                        
                        })
                    }                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        validTest(){    // 表单值是否合法检验
            let curDate = new Date();
            if (new Date(this.ruleForm.start_time) < curDate) {
                if (this.pageIsEdit) {
                    return true;
                }
                this.$message.warning('开始时间不能小于当前时间！');
                return false;
            }
            if (new Date(this.ruleForm.end_time) < new Date(curDate)) {
                this.$message.warning('结束时间不能小于当前时间！');
                return false;
            }
            if (new Date(this.ruleForm.end_time) < new Date(this.ruleForm.start_time)) {
                this.$message.warning('结束时间必须大于当前时间！');
                return false;
            }
            if (new Date(this.ruleForm.end_time) <= new Date(this.ruleForm.start_time)) {
                this.$message.warning('结束时间必须大于开始时间！');
                return false;
            }
            if (this.simuVisible) {
                return false;
            }
            if (this.simuVisible1) {
                return false;
            }
            if (this.simuVisible2) {
                return false;
            }
            if (this.simuVisible3) {
                return false;
            }
            if (this.simuVisible4) {
                return false;
            }
            if (this.simuVisible5) {
                return false;
            }
            if (this.simuVisible6) {
                return false;
            }
            if (this.simuVisible7) {
                return false;
            }
            if (this.simuVisible8) {
                return false;
            }
            return true;
        }
    }
}
</script>

<style lang="scss" scoped>
.team_form_wrapper{
    min-width: 1000px;
    display: flex;
    justify-content: space-between;
    .team_form{
        width: 100%;
        background-color:  #fff;
        margin: 10px 0 40px 0;
        padding: 10px;
        .product_image{
            display: flex;
            align-items: center;
            img{
                display: inline-block;
                width: 60px;
                margin: 0 10px 0 0;
            }
            span{
                display: inline-block;
                font-size: 12px;
            }
        }
        .title{
            font-size: 16px;
            padding: 0 0 0 10px;
            position: relative;
            &::before{
                content: "";
                position: absolute;
                width: 2px;
                height: 14px;
                margin: 3px 0;
                background: #105cfb;
                left: 0;
            }
            .toggle{
                margin: 0 0 0 10px;
            }
        }
        .default_radio{
            display: flex;
            align-items: center;
            margin: 12px 0 10px 0;
            label{
                margin: 0 10px 0 0;
            }
        }
        .config_more{
            .base{
                background-color: #f5f5f5;
                line-height: 24px;
                padding: 10px;
                margin: 10px 0 0 0;
                color: 333;
                h4{
                    font-weight: normal;
                }
            }
            .custom_wrapper{
                .el-form-item{
                    margin: 24px 0;
                    .share_picture{
                        width: 120px;
                        position: relative;
                        cursor: pointer;  
                        &:hover{
                            .mask,i{
                                display: block;
                            }
                        }
                        .mask{
                            display: none;
                            width: 100%;
                            height: 100%;
                            background: rgba(0,0,0,.3);
                            position: absolute;
                            top: 0;
                            left: 0;
                        }                      
                        img{
                            display: block;
                            width: 100%;
                            margin: 0;
                        }
                        i{
                            display: none;
                            font-size: 24px;
                            position: absolute;
                            top: 50%;
                            left: 50px;
                            transform: translateY(-12px);   
                            z-index: 10; 
                            color: #fff;                        
                        }
                    }
                    .add_picture{
                        .el-button{
                            width: 120px;
                            height: 120px;
                            font-size: 44px;
                        }
                    }
                }
            }
        }        
        .footer_btn_group{
            width: 100%;
            height: 60px;
            background-color: #fff;
            position: fixed;
            left: 180px;
            bottom: 0;
            z-index: 999;
            line-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #eee;
        }
    }
    ::v-deep .el-dialog__wrapper{
        .el-dialog__body{
            padding: 10px 20px 20px 20px;
            .product_type{
                display: flex;
                margin: 0 0 20px 0;
                dd{
                    width: 100px;
                    text-align: center;
                    background-color: #666;
                    line-height: 32px;
                    color: #fff;
                    margin: 0 20px 0 0;
                    cursor: pointer;
                }
                .curProduct{
                    background-color:#409EFF;
                }
            }
            .chooseCourseTable{
                .info_image{
                    width: 80px;
                }
            }
        }
    }
}    
</style>